Vue3框架Vite引用vant组件方法及相关问题解决方法 | 您所在的位置:网站首页 › vue3 demo 组件 完善 › Vue3框架Vite引用vant组件方法及相关问题解决方法 |
项目框架:vite + TS + vant4 (vite用的 Vue3 语法) 注意:本项目使用的Vue3,用的 Vant4。如果使用的Vue2,需使用Vant2。有官方文档可以查阅使用Vant4官方文档地址:https://vant-contrib.gitee.io/vant/#/zh-CN Vant安装可以在项目中通过 npm 进行安装,安装命令如下: # Vue 3 项目,安装最新版 Vant npm i vant # Vue 2 项目,安装 Vant 2 npm i vant@latest-v2 vant按需引入- - -安装“unplugin-vue-components” 插件Vite 中使用 Vant 的话,可以使用 “unplugin-vue-components” 插件,这个插件可以按需引入用到的Vant组件,使用Vant 组件时直接在 template模板 里使用就可以,不用手动 在 ts 脚本里 import导入 1.安装插件方法: # 通过 npm 安装 npm i unplugin-vue-components -D 2.配置插件:vite.config.tsvite.config.ts 文件中添加 “unplugin-vue-components” 插件的配置: import vue from '@vitejs/plugin-vue'; import Components from 'unplugin-vue-components/vite'; import { VantResolver } from 'unplugin-vue-components/resolvers'; export default { plugins: [ vue(), Components({ resolvers: [VantResolver()], }), ], }; 3.使用组件示例: 4.函数式组件使用注意事项Vant 中 Toast,Dialog,Notify 和 ImagePreview 组件是函数式组件,需要 import 引入后,再使用,且要引入组件样式,例如: import { showToast } from 'vant'; showToast('请填写正确的手机号');mian.ts 中引入组件样式: import 'vant/es/toast/style';其他函数式组件引用示例: // Dialog import { showDialog } from 'vant'; import 'vant/es/dialog/style'; // Notify import { showNotify } from 'vant'; import 'vant/es/notify/style'; // ImagePreview import { showImagePreview } from 'vant'; import 'vant/es/image-preview/style'; Vant 组件样式相关问题解决方法 1.修改vant 组件样式方法:引用组件后,在浏览器中打开调试窗口,找到对应要修改样式的组件元素,查看组件元素的类名,重写该类名样式 有时不生效可能是权重不够,叠加类名或者样式添加 “ !important ” 示例: .van-cell { font-size: 28px!important; background: transparent!important; } 2.vant表单组件清除组件很难点,经常点上去没有清除效果可能是被遮盖了,设置表单的右边margin 大于 清除图标的宽度: 示例: .van-field__control { margin-right: 15px!important; } 3.vant 表单清除按钮 PC端失效①安装模块 npm i @vant/touch-emulator -S ②在 “ main.ts ” 文件中引入模块后自动生效 import ‘@vant/touch-emulator’; 安装引入后如果没有立即生效,可以重启一下项目,再查看效果 查阅Vant 文档了解到 vant是针对移动端的,PC端下有些组件可能会失效,可以安装 “vant/touch-emulator” 模块解决。 Vant 有 Vue 2 版本、Vue 3 版本、微信小程序版本、 React 版本、支付宝小程序版本。 了解更多vant先关内容可以查阅Vant官方文档~ |
CopyRight 2018-2019 实验室设备网 版权所有 |